<template>
  <a-modal
    v-model:visible="visible"
    width="900px"
    title-align="start"
    :title="title"
    :footer="false"
    @close="emit('close')"
  >
    <div>
      <a-form ref="formRef" :model="form" layout="vertical" :rules="rules">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item field="controlNo" label="控制项编号">
              <a-input
                v-model="form.controlNo"
                placeholder="请输入控制项编号"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="materialName" label="物料名称">
              <inputModal
                v-model="form.materialName"
                :label-value="form.materialName"
                :value-name="'materialName'"
                label-name=" materialName"
                :title="'物料'"
                :default-query="{
                  secretLevel: props.secretLevel,
                }"
                :type="'materialCode'"
                @handle-ok="(row) => selectTab(row)"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="materialNo" label="物料编码">
              <a-input
                v-model="form.materialNo"
                disabled
                placeholder="请输入物料编码"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="drawingNumber" label="图号">
              <a-input
                v-model="form.drawingNumber"
                disabled
                placeholder="请输入图号"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="edition" label="版次">
              <a-input
                v-model="form.edition"
                placeholder="请输入版次"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="machiningName" label="加工内容">
              <inputModal
                v-model="form.machiningName"
                :label-value="form.machiningName"
                :value-name="'machiningName'"
                :label-name="'machiningName'"
                :title="'加工内容'"
                :default-query="{
                  secretLevel: props.secretLevel,
                }"
                :type="'processingContent'"
                @handle-ok="(row) => selectPprocessing(row)"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="categoryLv3Code" label="三级品类编码">
              <a-input
                v-model="form.categoryLv3Code"
                disabled
                placeholder="请输入"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="categoryLv3" label="三级品类名称">
              <a-input
                v-model="form.categoryLv3"
                disabled
                placeholder="请输入"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="supplierName" label="供应商名称">
              <!-- <a-input
                v-model="form.supplierName"
                placeholder="请输入"
                allow-clear
              /> -->
              <inputModal
                v-model="form.supplierName"
                :label-value="form.supplierName"
                :value-name="'supplierName'"
                :label-name="'supplierName'"
                :title="'供应商名称'"
                :type="'supplyName'"
                :default-query="{
                  secretLevel: props.secretLevel,
                }"
                @handle-ok="(row) => selectSupplyCode(row)"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="supplierCode" label="供应商编码">
              <a-input
                v-model="form.supplierCode"
                disabled
                placeholder="请输入供应商编码"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="singleCauseCode" label="单一来源原因">
              <dict-select
                v-model="form.singleCauseCode"
                allow-clear
                dict-type="single_cause_type"
                placeholder="请选择"
              ></dict-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="singleCauseDescribe" label="单一来源描述">
              <a-input
                v-model="form.singleCauseDescribe"
                placeholder="请输入单一来源描述"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="model" label="型号/牌号">
              <a-input
                v-model="form.model"
                disabled
                placeholder="请输入型号/牌号"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="specifications" label="规格">
              <a-input
                v-model="form.specifications"
                disabled
                placeholder="请输入规格"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="supplyStatus" label="供应状态">
              <a-input
                v-model="form.supplyStatus"
                placeholder="请输入"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="technicalStandard" label="技术标准/技术协议">
              <a-input
                v-model="form.technicalStandard"
                placeholder="请输入"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="effectiveStartTime" label="有效起始日期">
              <a-date-picker
                v-model="form.effectiveStartTime"
                :format="'YYYY-MM-DD'"
              ></a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="effectiveEndTime" label="有效截止日期">
              <a-date-picker
                v-model="form.effectiveEndTime"
                :format="'YYYY-MM-DD'"
              ></a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="remarks" label="备注">
              <a-input
                v-model="form.remarks"
                placeholder="请输入备注"
                allow-clear
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-space>
      <a-button type="primary" @click="saveForm">保存</a-button>
      <a-button @click="emit('close')">返回</a-button>
    </a-space>
  </a-modal>
</template>

<script setup lang="ts">
  // defineProps
  import { ref, defineProps, onMounted } from 'vue';
  import inputModal from '@/common/components/search-modal/input-modal.vue';
  import dictSelect from '@/common/components/dict-select/index.vue';
  // import secretLevelSelect from '@/common/components/cac-components/secret-level-select/index.vue';
  import {
    addMSubTable,
    editSubTable,
    detailsSubTable,
  } from '@/api/Basimanagementapi/categorymanagement';
  import { Message } from '@arco-design/web-vue';

  const props = defineProps({
    mainTableId: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      defalut: '',
    },
    detailsId: {
      type: String,
      defalut: '',
    },
    secretLevel: {
      type: String,
      defalut: '',
    },
  });
  onMounted(() => {
    getData();
  });
  const getData = async () => {
    if (props.detailsId) {
      const { data } = await detailsSubTable(props.detailsId);
      form.value = data;
    }
  };
  const rules = ref({
    materialName: [{ required: true, message: '请选择物料名称' }],
    // supplierCode: [{ required: true, message: '请输入供应商编码' }],
    machiningName: [{ required: true, message: '请选择加工内容' }],
    supplierName: [{ required: true, message: '请选择供应商名称' }],
    singleCauseCode: [{ required: true, message: '请选择单一来源原因' }],
    singleCauseDescribe: [{ required: true, message: '请输入单一来源描述' }],
    effectiveStartTime: [
      { required: true, message: '请选择有效起始日期' },
      {
        validator: (value: any, cb: any) => {
          if (form.value.effectiveEndTime) {
            if (value > form.value.effectiveEndTime) {
              cb('生效起始日期不能大于生效截止日期');
            }
          }
          cb();
        },
      },
    ],
    effectiveEndTime: [
      { required: true, message: '请选择有效截止日期' },
      {
        validator: (value: any, cb: any) => {
          if (form.value.effectiveStartTime) {
            if (value < form.value.effectiveStartTime) {
              cb('生效截止日期不能小于于生效起始日期');
            }
          }
          cb();
        },
      },
    ],
  });
  const form = ref<any>({});
  const visible = ref(true);
  const emit = defineEmits(['close', 'save', 'subtableRefresh']);

  // 物料名称选择
  const selectTab = (row: any) => {
    // 物料编码    图号  规格
    form.value.materialNo = row.maxPurchaseVolume; // 物料名称
    form.value.materialNo = row.materialCode; // 物料编号
    form.value.drawingNumber = row.figureNumber; // 图号
    form.value.specifications = row.specification; // 规格
    form.value.categoryLv3Code = row.categoryLv3Code; // 三级编码
    form.value.categoryLv3 = row.categoryLv3; // 三级名称
    form.value.model = row.modelMark; // 型号/牌号
    // form.value.supplierCode = row.supplierCode; // 供应商编码
    // form.value.supplierName = row.supplierName; // 供应商名称
    formRef.value.validateField('materialName');
  };
  // 加工内容
  const selectPprocessing = (row: any) => {
    form.value.machiningName = row.machiningName; // 加工内容名称
    form.value.machiningId = row.id; // 加工内容编码
    formRef.value.validateField('machiningName');
  };
  // 供应商名称
  const selectSupplyCode = (row: any) => {
    form.value.supplierCode = row.supplierCode;
    form.value.supplierName = row.supplierChinese;
    formRef.value.validateField('supplierName');
  };

  const formRef = ref();
  const saveForm = async () => {
    form.value.uniqueControlId = props.mainTableId;
    console.log(form.value);
    const verifyStatus = await formRef.value?.validate();
    if (!verifyStatus) {
      if (props.title === '新增') {
        try {
          const res: any = await addMSubTable(form.value);
          if (res.code === 200) {
            Message.success('新增成功');
            emit('save');
            emit('close');
            emit('subtableRefresh');
          }
        } catch (err: any) {
          console.log(err);
        }
      } else if (props.title === '编辑') {
        try {
          const res: any = await editSubTable(form.value);
          if (res.code === 200) {
            Message.success('编辑成功');
            emit('save');
            emit('close');
            emit('subtableRefresh');
          }
        } catch (err: any) {
          console.log(err);
        }
      }
    }
  };
</script>

<style lang="less" scoped>
  .query-form {
    display: flex;
    width: 100%;
    padding: 20px;
    background: #f7f9fc;
    border-radius: 8px;
  }

  ::v-deep .arco-form-item {
    background: #fff;

    &:focus-within {
      border-color: #165dff;
    }

    .arco-form-item-wrapper-col {
      border: 1px solid #d9dee7;
      border-radius: 3px;
    }

    .arco-picker-size-medium {
      width: 100%;
    }

    .arco-input-wrapper,
    .arco-picker,
    .arco-select-view-single {
      padding-left: 0;
      background-color: transparent;
      border-color: transparent;
    }
  }
</style>
